<template>
  <div class="container">
    <div class="box">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="off"
        label-position="left"
      >
        <div class="title-container">
          <h3 class="title">注册</h3>
        </div>

        <el-form-item prop="nickName">
          <span class="svg-container">
            <svg-icon icon-class="size" />
          </span>
          <el-input
            ref="nickName"
            v-model="loginForm.nickName"
            placeholder="请输入用户名称"
            name="nickName"
            tabindex="3"
            auto-complete="off"
          />
        </el-form-item>

        <el-form-item prop="userName">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            ref="userName"
            v-model="loginForm.userName"
            placeholder="请输入账号"
            name="userName"
            type="text"
            tabindex="1"
            auto-complete="off"
          />
        </el-form-item>

        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="off"
            @keyup.enter.native="register"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-form-item>

        <template>
          <el-link style="margin: 0 0 8px 0; color: #fff" @click="handle"
            >返回登录</el-link
          >
        </template>
        <div>
          <el-button :loading="loading" type="primary" @click.native.prevent="register(false)">注册用户</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register } from "@/api/user";
export default {
  name: "register",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value || value.length < 1) {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度不能小于6位"));
      } else {
        callback();
      }
    };
    const validateNickName = (rule, value, callback) => {
      if (!value || (value && value.length < 1)) {
        console.log();
        callback(new Error("请输入用户昵称"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        userName: "",
        password: "",
        nickName: "",
      },
      loginRules: {
        userName: [{ trigger: "blur", validator: validateUsername }],
        password: [{ trigger: "blur", validator: validatePassword }],
        nickName: [{ trigger: "blur", validator: validateNickName }],
      },
      passwordType: "password",
      loading: false,
    };
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 登录
    async register(isManager) {
      const response = await register({
        userName: this.loginForm.userName,
        password: this.loginForm.password,
        nickName: this.loginForm.nickName,
        isManager,
      });
      if (response.code !== 100) return this.$message.warning(response.msg);
      this.$message.success("注册成功！");
      this.$router.push("/").catch(e => {});
    },
    handle() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: url("~@/assets/rege_bg.webp") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 500px;
    height: 520px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 20px;
    .title-container {
      text-align: center;
    }
  }
}
</style>
